<template>
  <div>
    <el-card>
      <el-page-header icon="" title="高校教学考试成绩管理系统">
        <template #content>
          <span class="text-large font-600 mr-3">我的成绩</span>
          <el-button style="margin-left: 600px" type="primary" :icon="Printer" @click="handlePrint">打印</el-button>
        </template>
      </el-page-header>

      <div id="printarea">
        <div v-if="isprint">
          <el-row>
            <el-col :span="6"> 工号：{{ store.state.userInfo.username }} </el-col>
            <el-col :span="6"> 姓名：{{ store.state.userInfo.name }} </el-col>
            <el-col :span="6"> 专业：{{ studentData.major }} </el-col>
            <el-col :span="6"> 年级：{{ studentData.year }} </el-col>
          </el-row>
        </div>

        <el-table :data="tableData" style="width: 100%" stripe>
          <el-table-column label="学期">
            <template #default="scope">
              {{ scope.row.term === 20231 ? '2023-2024学年第1学期' : '2023-2024学年第2学期' }}
            </template>
          </el-table-column>
          <el-table-column prop="courseid" label="课程编号" />
          <el-table-column prop="coursename" label="课程名称" />
          <el-table-column label="平时成绩">
            <template #default="scope">
              <el-form-item style="margin: auto" v-if="scope.row.daily">
                {{ scope.row.daily }}
              </el-form-item>
              <el-form-item style="margin: auto" v-else> — </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="实验成绩">
            <template #default="scope">
              <el-form-item style="margin: auto" v-if="scope.row.exp">
                {{ scope.row.exp }}
              </el-form-item>
              <el-form-item style="margin: auto" v-else> — </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="期中成绩">
            <template #default="scope">
              <el-form-item style="margin: auto" v-if="scope.row.mid">
                {{ scope.row.mid }}
              </el-form-item>
              <el-form-item style="margin: auto" v-else> — </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="期末成绩">
            <template #default="scope">
              <el-form-item style="margin: auto" v-if="scope.row.type === 1">
                {{ scope.row.final }}
              </el-form-item>
              <el-form-item style="margin: auto" v-else>
                {{ level(scope.row) }}
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="补考成绩">
            <template #default="scope">
              <div v-if="!scope.row.ispass">
                <el-form-item style="margin: auto" v-if="scope.row.reexam && scope.row.type === 1">
                  {{ scope.row.reexam }}
                </el-form-item>
                <el-form-item style="margin: auto" v-else-if="scope.row.reexam && scope.row.type === 2">
                  {{ scope.row.reexam === 60 ? '及格' : '不及格' }}
                </el-form-item>
                <el-form-item style="margin: auto" v-else> — </el-form-item>
              </div>
              <div v-else>
                <el-form-item style="margin: auto"> — </el-form-item>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="courseid" label="总评">
            <template #default="scope">
              <div v-if="!scope.row.ispass">
                <el-form-item style="margin: auto" v-if="scope.row.reexam && scope.row.type === 1">
                  {{ scope.row.reexam }}
                </el-form-item>
                <el-form-item style="margin: auto" v-else-if="scope.row.reexam && scope.row.type === 2">
                  {{ scope.row.reexam === 60 ? '及格' : '不及格' }}
                </el-form-item>
                <el-form-item style="margin: auto" v-else> — </el-form-item>
              </div>
              <div v-else>
                <div style="margin: auto" v-if="scope.row.type === 1">
                  {{ total(scope.row) }}
                </div>
                <div style="margin: auto" v-else>
                  {{ level(scope.row) }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="绩点">
            <template #default="scope">
              <div v-if="!scope.row.ispass">
                <div style="margin: auto" v-if="scope.row.reexam === 60">1.00</div>
                <div style="margin: auto; color: red; background-color: yellow" v-else>0</div>
              </div>
              <div v-else>
                <div style="margin: auto; color: red; background-color: yellow" v-if="total(scope.row) < 60">0</div>
                <div style="margin: auto" v-else>
                  {{ ((total(scope.row) - 50) / 10).toFixed(2) }}
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import { Printer } from '@element-plus/icons-vue'
import axios from 'axios'
const store = useStore()
const studentData = ref({})
const tableData = ref([])

const total = (data) => {
  let arr = data.ratio.split(',')
  // console.log(arr)
  const num1 = Number(arr[0])
  const num2 = Number(arr[1])
  const num3 = Number(arr[2])
  const num4 = Number(arr[3])
  data.daily = data.daily ? Number(data.daily) : 0
  data.exp = data.exp ? Number(data.exp) : 0
  data.mid = data.mid ? Number(data.mid) : 0
  data.final = data.final ? Number(data.final) : 0
  const sum = data.daily * num1 + data.exp * num2 + data.mid * num3 + data.final * num4
  return sum / 10
}
const level = ({ final }) => {
  switch (final) {
    case 95:
      return '优秀'
      break
    case 85:
      return '良好'
      break
    case 75:
      return '中等'
      break
    case 65:
      return '及格'
      break
    case 0:
      return '不及格'
      break
  }
}
const isprint = ref(false)

onMounted(async () => {
  await getStudentData()
  await getTableData()
})
const getStudentData = async () => {
  const res = await axios.get(`/api/student/list/${store.state.userInfo.username}`)
  studentData.value = res.data.data[0]
}
const getTableData = async () => {
  const res1 = await axios.get(`/api/course/studentpublishedlist/${studentData.value.major}`)
  const res2 = await axios.get(`/api/score/publishedlist/${store.state.userInfo.username}`)
  // console.log(res1.data.data)
  // console.log(res2.data.data)
  // 附上成绩信息
  await res1.data.data.forEach((item) => {
    res2.data.data.forEach((i) => {
      if (item['courseid'] === i['courseid']) {
        Object.assign(item, i)
      }
    })
  })
  // console.log(res1.data.data)
  tableData.value = res1.data.data
}
const handlePrint = () => {
  isprint.value = true
  setTimeout(() => {
    document.getElementsByTagName('body')[0].style.zoom = 0.6
    document.body.innerHTML = document.getElementById('printarea').innerHTML
    window.print() //调用浏览器的打印功能打印指定区域
    window.location.reload()
  }, 100)
}
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 50px;
}
::v-deep .el-table .el-table__cell {
  text-align: center;
}
::v-deep .el-form-item__content {
  justify-content: center;
}
</style>
